<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>
        function getValue(){
            // 1.根据id获取到form元素
            var x = document.getElementById("form1");
            // 或者 根据name获取表单，下面的x要换成objForm
            // var objForm = document.form1;

            // 2.对表单进行遍历
            for(var i=0;i<x.length;i++){
            // 2.1 根据id查找到全选的checkbox
            var a = document.getElementById("all");
            // 2.2 需要判断我们获取的全选的checkbox是否被选中
            if(a.checked==true){
                // 2.3 如果被选中，还需要去判断当前的元素是不是checkbox，如果是checkbox就需要将他选中
                if(x.elements[i].type=="checkbox"){
                    x.elements[i].checked=true;
                }
            }else{
                if(x.elements[i].type=="checkbox"){
                    x.elements[i].checked=false;
                }
            }
            }
        }
    </script>

<!-- 另一种写法 objForm-->
<!-- <script>
    function getValue() {
        //1. 根据id获取到form表单元素
        // var x = document.getElementById("form1");
        var objForm = document.form1; //根据表单中的name来获取到表单
        //2.对表单进行遍历
        for(var i = 0;i<objForm.length;i++){
        //2.1 根据id查找到全选的checkbox
        var a = document.getElementById("all");
        //2.2 需要判断我们获取的全选的checkbox是否被选中
        if(a.checked==true){
            //2.3 如果被选中，还需要去判断当前的元素是不是checkbox,如果是checkbox就要将它选中
            if(objForm.elements[i].type=="checkbox") {
                objForm.elements[i].checked=true;
            }
        }else {
            // 反选
            if(objForm.elements[i].type=="checkbox") {
                objForm.elements[i].checked=false;
            }
        }
        }
    }
</script> -->

</head>
<body>
  <form action="" id="form1" name="form1" method="POST">

    <input type="checkbox" id="all" value="全选" onclick="getValue()">
    全选
    <br>
    <input type="checkbox" name="hib" size="20" value="a">
    学习
    <br>
    <input type="checkbox" name="hib" size="20" value="b">
    体育
    <br>
    <input type="checkbox" name="hib" size="20" value="c">
    音乐
    <br>
  </form>
        
</body>
</html>